<template>
	<view class="book-list">
		<view class="book" v-for="(item,i) in hotList" :key="i" @tap="Godetails(item)">
			<view class="book-img">
				<image :src="tool.img(item.zhuimages[0])" mode="scaleToFill"></image>
			</view>
			<view class="book-name">
				{{ item.name }}
			</view>
			<view class="book-footer">
				<view class="book-price">
					<view class="new-price">
						<text>￥</text>
						<text>{{ item.price }}</text>
					</view>
				</view>
				<view class="book-cart">
					已售{{ item.xiao }}
				</view>
			</view>
			<view class="p-footer">
				<view class="p-left">
					<text>7天无理由退货</text>
				</view>
				<view class="p-right">
					<text>运费险</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tool from '../utils/tool.js'
	export default {
		name: "book-list",
		props: {
			hotList: {
				type: Array,
				default: ''
			}
		},
		data() {
			return {
				tool: tool,
			};
		},
		methods: {
			Godetails(item) {
				uni.navigateTo({
					url: '/pages/book/index?id=' + item.id
				})
			}
		}
	}
</script>

<style>
	.book-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.book {
		margin-bottom: 20rpx;
		width: 49%;
		background-color: #fff;
		border-radius: 16rpx;
	}

	.book-img {
		width: 100%;
		height: 320rpx;
	}

	.book-img>image {
		border-radius: 16rpx;
		width: 100%;
		height: 100%;
	}

	.book-name {
		height: 80rpx;
		margin: 20rpx 0 10rpx 0;
		padding: 0rpx 10rpx;
		font-weight: bold;
		font-size: 28rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.book-idcr {
		padding: 0rpx 10rpx;
		font-size: 24rpx;
		color: #999;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.book-footer {
		margin: 10rpx 0;
		padding: 0rpx 10rpx;
		height: 45rpx;
		display: flex;
		align-items: center;
	}

	.book-price {
		width: 50%;
		height: 100%;
	}

	.book-cart {
		width: 50%;
		height: 100%;
		font-size: 26rpx;
		color: #676767;
		display: flex;
		justify-content: flex-end;
	}

	.new-price {
		width: 100%;
		height: 50%;
	}

	.new-price>text:nth-child(1) {
		font-size: 28rpx;
		color: #ff5502;
		font-weight: bold;
	}

	.new-price>text:nth-child(2) {
		font-size: 28rpx;
		color: #ff5502;
		font-weight: bold;
	}

	.old-price {
		width: 100%;
		height: 50%;
		text-decoration: line-through #999;
		font-size: 28rpx;
	}

	.old-price>text:nth-child(1) {
		color: #999;
	}

	.old-price>text:nth-child(2) {
		color: #999;
	}
	
	
	.p-footer {
		margin: 10rpx auto 20rpx auto;
		width: 94%;
		display: flex;
		font-size: 24rpx;
		align-items: center;
		color: #deab80;
	}
	
	
	.p-left {
		background-color: #fff1ee;
		margin-right: 10rpx;
		border: 1rpx solid #deab80;
		padding: 2rpx 4rpx;
		border-radius: 4rpx;
	}
	
	.p-right {
		border-radius: 4rpx;
		padding: 2rpx 4rpx;
		border: 1rpx solid #deab80;
		background-color: #fff1ee;
	}
</style>